<template>
	<view class="content">
		<message ref="Message"></message>
		<Header title="账号管理"></header>
		<view class="container">
			<view class="ui-all">
				<view class="avatar" @tap="avatarChoose">
					<view  class="imgAvatar">
						<view class="iavatar" :style="'background: url(/static/images/picture/'+avater+') no-repeat center/cover '">
							
						</view>
					</view>
					<text >修改头像</text>
					<button v-if="!avater" open-type="getUserInfo" @tap="getUserInfo" class="getInfo"></button>
				</view>
				<view class="ui-list">
					<text>昵称</text>
					<input type="text" :placeholder="value" :value="userInfo.user_nick_name" @input="bindnickName" placeholder-class="place" />
				</view>
				<view class="ui-list">
					<text>手机号</text>
					<input v-if="userInfo.user_name" type="tel" :placeholder="value" :value="userInfo.user_name"  placeholder-class="place" disabled/>
					<button v-if="!userInfo.user_name" open-type="getPhoneNumber" @getphonenumber="getphonenumber" class="getInfo bun">授权手机号</button>
				</view>
				<view class="ui-list">
					<text>会员组</text>
					<button   class="getInfo bun">{{ vipList[userInfo.group_id] }}</button>
				</view>
				<!-- <view class="ui-list right">
					<text>性别</text>
					<picker @change="bindPickerChange" mode='selector' range-key="name" :value="index" :range="sex">
						<view class="picker">
							{{sex[index].name}}
						</view>
					</picker>
				</view> -->
				<!-- <view class="ui-list right">
					<text>常住地</text>
					<picker @change="bindRegionChange" mode='region'>
						<view class="picker">
							{{region[0]}} {{region[1]}} {{region[2]}}
						</view>
					</picker>
				</view>
				<view class="ui-list right">
					<text>生日</text>
					<picker mode="date" :value="date" @change="bindDateChange">
						<view class="picker">
							{{date}}
						</view>
					</picker>
				</view> -->
				<view class="ui-list">
					<text>签名</text>
					<textarea :placeholder="value" placeholder-class="place" :value="userInfo.user_portrait_thumb" @input="binddescription"></textarea>
				</view>
				<button class="save" @tap="savaInfo">保 存 修 改</button>
			</view>
		
		</view>
	</view>
</template>

<script>
	
	import Header from '@/components/header/header.vue'
	export default {
		components: {
			Header,
		},
		onLoad() {
			this.userInfo = getApp().globalData.userInfo
			this.avater = getApp().globalData.userInfo.user_portrait
		},
		onShow() {
			if (getApp().globalData.avatar) {
				this.avater = getApp().globalData.avatar
			}
		},
		data() {
			return {
				value: '请填写',
				sex: [{
					id: 1,
					name: '男'
				}, {
					id: 2,
					name: '女'
				}],
				index: 0,
				region: ['请填写'],
				date: '请填写',
				avater: '',
				description: '',
				url: '',
				nickName: '',
				mobile: '',
				headimg: '',
				userInfo: {
					user_nick_name: '',
					user_portrait: '',
					user_name: '',
					group_id: 0,
					user_portrait_thumb: ''
				},
				updateUserInfo: {
					user_nick_name: '',
					user_portrait: '',
					user_name: '',
					user_portrait_thumb: ''
				},
				vipList: ['游客', '游客', '已到期','vip会员'],
				lock: true,
				clickTimeNum: 0
			};
		},
		onBackPress() {
			getApp().globalData.avatar = ''
		},
		methods: {
			bindnickName(e) {
				this.updateUserInfo.user_nick_name = e.detail.value;
				
			},
			binddescription(e) {
				this.updateUserInfo.user_portrait_thumb = e.detail.value;
				
			},
			avatarChoose() {
				// let that = this;
				// uni.chooseImage({
				// 	count: 1,
				// 	sizeType: ['original', 'compressed'],
				// 	sourceType: ['album', 'camera'],
				// 	success(res) {
				// 		// tempFilePath可以作为img标签的src属性显示图片
				// 		that.imgUpload(res.tempFilePaths);
				// 		const tempFilePaths = res.tempFilePaths;
				// 	}
				// });
				
				this.$goto('/pages/avatar/avatar')
			},
			 getUserInfo () {
				  uni.getUserProfile({
			      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
			      success: (res) => {
			       console.log(res);
				   uni.showToast({
							   title: '已授权',
							   icon: 'none',
							   duration: 2000
							   }) 
			      }
			    })
			    } ,
				 getphonenumber(e){
					if(e.detail.iv){
					  console.log(e.detail.iv) //传后台解密换取手机号
						  uni.showToast({
							   title: '已授权',
							   icon: 'none',
							   duration: 2000
							   }) 
					}
								  },
			savaInfo() {
				const data = {}
				this.updateUserInfo.user_portrait = getApp().globalData.avatar
				for (let k in this.updateUserInfo) {
					if (this.updateUserInfo[k]) {
						data[k] = this.updateUserInfo[k]
					}
				}
				if (Object.keys(data).length === 0) {
					this.clickTimeNum++
					this.message(this.clickTimeNum)
					return 
				}
				this.clickTimeNum = 0
				this.updata(data)
			},
			message(num) {
				switch(num) {
					case 1 :
						this.$refs['Message'].info('亲你没有更改哦是不需要保存的')
					break
					case 2 :
						this.$refs['Message'].info('别玩啦，去看影片吧')
					break
					case 3 :
						this.$refs['Message'].info('还来？我生气啦 (－＂－怒) ')
					break
					case 4 :
						this.$refs['Message'].info('(－＂－怒) (－＂－怒) (－＂－怒)')
					break
					default : 
						this.$refs['Message'].warn('有本事就戳爆我略略略(灬°ω°灬)')
					break 
				}
			},
			isPoneAvailable(poneInput) {
				var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
				if (!myreg.test(poneInput)) {
					return false;
				} else {
					return true;
				}
			},
			async updata(update) {
				if (!this.lock) return 
				this.lock = false
				const userInfo = uni.getStorageSync('userInfo')
				console.log(update)
				const { data: res } = await this.$http({
					url: this.$api.changeInfo,
					method: 'POST',
					data: {
						...update,
						...userInfo
					}
				}) 
				console.log(res)
				if (res.status !== 200) {
					this.$refs['Message'].error('修改失败')
					const self = this
					setTimeout(() => {
						self.lock = true
					}, 2000)
					return 
				} 
				for (let k in update) {
					getApp().globalData.userInfo[k] = update[k]
				}
				this.$refs['Message'].success('修改成功')
				// 清空
				this.updateUserInfo =  {
					user_nick_name: '',
					user_portrait: '',
					user_name: '',
					user_portrait_thumb: ''
				}
				getApp().globalData.avatar = ''
				const self = this
				setTimeout(() => {
					self.lock = true
				}, 2000)
				
			},
			
			imgUpload(file) {
				let that = this;
				uni.uploadFile({
					header: {
						Authorization: uni.getStorageSync('token')
					},
					url:'/api/upload/image', //需传后台图片上传接口
					filePath: file[0],
					name: 'file',
					formData: {
						type: 'user_headimg'
					},
					success: function(res) {
						var data = JSON.parse(res.data);
						data = data.data;
						that.avater = that.url + data.img;
			
						that.headimg = that.url + data.img;
			
						
					},
					fail: function(error) {
						console.log(error);
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	container {
		display: block;
	}
	
	.ui-all {
		padding: 20rpx 40rpx;
	
		.avatar {
			width: 100%;
			text-align: left;
			padding: 20rpx 0;
			border-bottom: solid 1px #f2f2f2;
			position: relative;
	
			.imgAvatar {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				display: inline-block;
				vertical-align: middle;
				border: 2px solid #32CCBC;
				background-position: center center;
				overflow: hidden;
	
				.iavatar {
					width: 100%;
					height: 100%;
					
				}
			}
	
			text {
				display: inline-block;
				vertical-align: middle;
				color: #8e8e93;
				font-size: 28rpx;
				margin-left: 40rpx;
			}
	
			&:after {
				content: ' ';
				width: 20rpx;
				height: 20rpx;
				border-top: solid 1px #030303;
				border-right: solid 1px #030303;
				transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				/* IE 9 */
				-moz-transform: rotate(45deg);
				/* Firefox */
				-webkit-transform: rotate(45deg);
				/* Safari 和 Chrome */
				-o-transform: rotate(45deg);
				position: absolute;
				top: 85rpx;
				right: 0;
			}
		}
	
		.ui-list {
			width: 100%;
			text-align: left;
			padding: 20rpx 0;
			border-bottom: solid 1px #f2f2f2;
			position: relative;
	
			text {
				color: #4a4a4a;
				font-size: 28rpx;
				display: inline-block;
				vertical-align: middle;
				min-width: 150rpx;
			}
	
			input {
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
			}
			button{
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
				background: none;
				margin: 0;
				padding: 0;
				&::after{
					display: none;
				}
			}
			picker {
				width: 90%;
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
				position: absolute;
				top: 30rpx;
				left: 150rpx;
			}
	
			textarea {
				color: #030303;
				font-size: 30rpx;
				vertical-align: middle;
				height: 150rpx;
				width: 100%;
				margin-top: 50rpx;
			}
	
			.place {
				color: #999999;
				font-size: 28rpx;
			}
		}
	
		.right:after {
			content: ' ';
			width: 20rpx;
			height: 20rpx;
			border-top: solid 1px #030303;
			border-right: solid 1px #030303;
			transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			/* IE 9 */
			-moz-transform: rotate(45deg);
			/* Firefox */
			-webkit-transform: rotate(45deg);
			/* Safari 和 Chrome */
			-o-transform: rotate(45deg);
			position: absolute;
			top: 40rpx;
			right: 0;
		}
	
		.save {
			background-image: linear-gradient( 135deg, #90F7EC 10%, #32CCBC 100%);
			border: none;
			color: #ffffff;
			margin-top: 40rpx;
			font-size: 28rpx;
		}
	}
</style>
